
<template>
 <div class="content">
    <div v-show="isSeen" class="addOrEdit others" >
      <form>
        <table>
          <tbody>
            <tr>
              <td><label for="">标题：</label></td>
              <td><input type="text" v-model="blog.title"></td>
            </tr>
            <tr>
              <td><label for="">作者：</label></td>
              <td><input type="text" v-model="blog.author"></td>
            </tr>
            <tr>
              <td><input type="button" value="保存" @click="btnSave"></td>
              <td><input type="button" value="取消" @click="btnCancel"></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div class="find others">
      <input type="text" v-model="search" placeholder="请输入关键词">
      <input type="button" value="查询" @click="btnFind">
      <input type="button" value="新增" @click="btnAdd">
    </div>
    <div class="list others">
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>标题</th>
            <th>作者</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="blog in filter" :key="blog.id">
            <td>{{ blog.id }}</td>
            <td>{{ blog.title }}</td>
            <td>{{ blog.author }}</td>
            <td>
              <input type="button" value="编辑" @click="btnEdit(blog.id)">
              <input type="button" value="删除" @click="btnDel(blog.id)">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
 </div>
</template> 


<script setup>
import { ref } from 'vue';

const url = 'http://localhost:3000/blogs';

let blogs = ref([]);

async function fetchBlogs() {
    const response = await fetch(url);
    const data = await response.json();
    // console.log('Fetched blogs:', data); 
    blogs.value = data.data; 
    filter.value = blogs.value;
}

fetchBlogs();

let blog = ref({
  id: 0,
  title: '',
  author: ''
});
let isSeen = ref(false);
let current = ref(null);
let search = ref('');

let filter = ref([]);

function btnFind(){
  console.log('查询');
  const query = search.value.toLowerCase().trim();
  filter.value = blogs.value.filter(blog =>
    blog.title.toLowerCase().includes(query) ||
    blog.author.toLowerCase().includes(query)
  );
}
function btnAdd() {
  isSeen.value = true;
  blog.value = { id: null, title: '', author: '' };
  current.value = null;
}

async function btnDel(id) {
    await fetch(`${url}/${id}`, {
      method: 'DELETE'
    });
    await fetchBlogs(); 
}

function btnEdit(id) {
  isSeen.value = true;
  current.value = blogs.value.find(blog => blog.id === id);
  blog.value = { ...current.value };
}

async function btnSave() {
    if (current.value) {
      await fetch(`${url}/${current.value.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(blog.value)
        
      });
      
    } else {
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(blog.value)
      });
      const newBlog = await response.json();
      blog.value.id = newBlog.id;
    }
    // console.log(blog.value);
    blog.value.title = blog.value.title.trim()
    blog.value.author = blog.value.author.trim()
     console.log(blog.value);
    await fetchBlogs(); 
    isSeen.value = false;
    blog.value = { id: null, title: '', author: '' };
    current.value = null;
}

function btnCancel() {
  isSeen.value = false;
  blog.value = { id: 0, title: '', author: '' };
  current.value = null;
}
</script>